import React, { Component } from 'react';
import { Form, Input } from 'antd-mobile';
import {
    Button,
    Dialog,
    TextArea,
    DatePicker,
    Selector,
    Slider,
    Stepper,
    Switch,
  } from 'antd-mobile'

class Register extends Component {

     onFinish(){
        alert('123')
     } 

    render() {
        return (
            <div>
                <Form
                    layout='horizontal'
                    footer={
                    <Button block type='submit' color='primary' size='large' onClick={()=>{this.onFinish()}}>
                        提交
                    </Button>
                    }
                >
                <Form.Header>水平布局表单</Form.Header>
                <Form.Item
                    name='name'
                    label='姓名'
                    rules={[{ required: true, message: '姓名不能为空' }]}
                >
                    <Input onChange={console.log} placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item name='address' label='地址' help='详情地址'>
                <TextArea
                    placeholder='请输入地址'
                    maxLength={100}
                    rows={2}
                    showCount
                />
                </Form.Item>
                <Form.Item name='amount' label='数量' childElementPosition='right'>
                <Stepper />
                </Form.Item>
                <Form.Item
                name='delivery'
                label='送货上门'
                childElementPosition='right'
                >
                    <Switch />
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default Register;